<template lang="html">
  <div id="app">
  	<keep-alive>
  		<router-view/>
  	</keep-alive>
  </div>
</template>
<script>
	export default {
	  name: 'app',
    mounted() {
      if (!this.CacheHelper.getItemWithTime('http://novel.juhe.im/categories')) {
        this.$axios.get('http://novel.juhe.im/categories')
        .then((response) => {
          this.$store.state.main_cates = response.data;
          this.CacheHelper.setItemWithTime('http://novel.juhe.im/categories',response.data);
        })
        .catch((err) => {
          console.log(err);
        });
      }else{
        console.log('读取本地存储记录');
        this.$store.state.main_cates = this.CacheHelper.getItemWithTime('http://novel.juhe.im/categories');
      }

      if (!this.CacheHelper.getItemWithTime('http://novel.juhe.im/sub-categories')) {
        this.$axios.get('http://novel.juhe.im/sub-categories')
        .then((response) => {
          this.$store.state.all_cates = response.data;
          this.CacheHelper.setItemWithTime('http://novel.juhe.im/sub-categories',response.data);
        })
        .catch((err) => {
          console.log(err);
        });
      }else{
        console.log('读取本地存储记录');
        this.$store.state.all_cates = this.CacheHelper.getItemWithTime('http://novel.juhe.im/sub-categories');
      }
    }
	}
</script>
<style lang="scss">
	@import "../css/reset.scss";
  
  /* 清浮动 */
  .clear {
    zoom: 1;
  }
  .clear:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
  /* iconfont通用头样式基础 */
  .icon {
     width: 1em; height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
  }
  /* tab激活时 */
  .tabActive {
    color: #01bf9a;
  }
  /* nav激活时 */
  .navActive {
    color: #01bf9a;
    box-sizing: border-box;
    &:after {
      content: "";
      display: block;
      width: 75%;
      margin: 0 auto;
      height: 0;
      box-sizing: border-box;
      border-bottom: 4px solid #01bf9a;
      position: relative;
      bottom: 2px;
    }
    /* margin-top距离上边距 margin-top-110 */
    .marginTop110 {
      margin-top: 110px;
    }
  }
</style>